<template>
  <div class="deatilpurchase">
    <pb-drawer v-model="isVisible" :title="'详情'" :direction="'btt'" :size="'92%'" @cancelFn="CancelFn"
      @confirmFn="confirmFn">
      <searchCard @onSearch="searchFn" @onReset="resetFn">
        <el-form :model="detailFrom" label-width="auto" inline @keyup.enter="searchFn">
          <el-form-item label="创建时间：">
            <!-- <el-date-picker v-model="detailFrom.startDate" type="date" placeholder="请选择日期" @change="timeChangeFn"
              :clearable="false" :editable="false" /> -->
            <pb-date-picker v-model="planDateRang" placeholder="请输入菜谱日期" @change="timeChangeFn"></pb-date-picker>
          </el-form-item>
          <el-form-item label="SKU名称">
            <pb-input v-model="detailFrom.skuName" :disabled="true"></pb-input>
          </el-form-item>
          <el-form-item label="供应商名称">
            <!-- <pb-input v-model="detailFrom.supplierName"></pb-input> -->
            <pb-select v-model="detailFrom.supplierId" placeholder="请选择供应商" keys="supplierId" label="supplierName"
              :options="PurchaseList" :filterable="true" :filterMethod="filterMethod" />
          </el-form-item>
        </el-form>
      </searchCard>
      <div class="chartclass">
        <div ref="chartContainer" style="width:100%; height: 374px;"></div>
      </div>
      <div class="m-t3">
        <pb-table :column="Column" :tableData="TableData" :bottomElement="['pb-page']" height="300">
        </pb-table>
      </div>
      <template #footer>
      </template>
    </pb-drawer>
  </div>
</template>
<script setup lang="ts">
import { formattedDate } from '@/utils/moment'
import * as echarts from 'echarts';
import { GetChartDataApi, GetPurchaseHistoryDetailsApi, GetPurchaseListApi } from '@/api/Purchasing'
const SupplierList = ref([] as any)
const PurchaseList = ref([] as any)
const filterMethod = (query) => {
  if (query) {
    PurchaseList.value = SupplierList.value.filter((item) => {
      return item.supplierId?.toLowerCase().includes(query.toLowerCase()) || item.supplierName?.toLowerCase().includes(query.toLowerCase())
    })
  } else {
    PurchaseList.value = SupplierList.value
  }
}
const TableData = ref([])
const Column = [
  {
    key: "skuClassName",
    name: "SKU类别"
  },
  {
    key: "skuName",
    name: "SKU名称",
  },
  {
    key: "price",
    name: "历史非税价格(元)",
    align: "right",
  },
  {
    key: "supplierName",
    name: "供应商",
  }, {
    key: "accountingUnitName",
    name: "计量单位",
  },
  {
    key: "specifications",
    name: "规格",
  },
  {
    key: "unitWeight",
    name: "单位重量(kg)",
    align: "right",
  },
  {
    key: 'brand',
    name: '品牌'
  },
  {
    key: 'createTime',
    name: '创建时间'
  }
]
const NewDate = new Date() as any
const isVisible = ref(false)
const confirmFn = () => {

}
const planDateRang = ref([formattedDate(NewDate - 30 * 24 * 60 * 60 * 1000, 'YYYY-MM-DD'), formattedDate(NewDate, 'YYYY-MM-DD')] as any)
const detailFrom = reactive({
  skuName: '',
  supplierId: '',
  skuCode: ''
})
const chartContainer = ref(null);
let chartInstance: any = null;
const initChart = (echartData: any) => {
  let echartseries: any = []
  let legendnameList: any = []
  if (echartData.yaxisDataList && echartData.yaxisDataList.length > 0) {
    echartData.yaxisDataList.forEach((el: any) => {
      if (el.supplierName) {
        legendnameList.push(el.supplierName)
      }
      if (el.seriesDataList && el.seriesDataList.length > 0) {
        echartseries.push({
          name: el.supplierName,
          type: 'line',
          stack: '总量',
          data: el.seriesDataList,
        },)
      }
    })
  }
  // console.log('legendnameList ', echartseries)
  if (chartContainer.value) {
    if (chartInstance) {
      chartInstance.dispose(); // 销毁旧的图表实例
    }
  }
  // if (chartContainer.value) {
  chartInstance = echarts.init(chartContainer.value);
  const option = {
    title: {
      // text: '', //名称
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: legendnameList,
      orient: 'vertical', // 垂直排列图例
      right: '1%',       // 将图例放置在图表右侧，距离容器右侧10%的位置
      // 你可以根据需要调整 top 属性来控制图例与图表顶部的距离
      top: '10%',
    },
    grid: {
      top: '8%',
      left: '3%',   // 调整左边距
      right: '10%',  // 调整右边距
      bottom: '3%', // 你可以根据需要调整下边距
      containLabel: true, // 确保标签不会被裁剪
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: echartData.xaxisDataList,
    },
    yAxis: {
      type: 'value',
      name: '元',
      splitLine: {
        show: true, // 确保刻度线显示
        lineStyle: {
          type: 'dashed', // 将刻度线设置为虚线
          color: '#ccc', // 可选：设置刻度线的颜色
          width: 1 // 可选：设置刻度线的宽度
        }
      },
    },
    series: echartseries
  };
  chartInstance.setOption(option, true);
  // }
};
const timeChangeFn = (time: any) => {
  // console.log(time, '22')
  // detailFrom.startDate = formattedDate(time, 'YYYY-MM-DD')
  // let endtime = new Date(time).getTime()
  // detailFrom.endDate = formattedDate(endtime + 30 * 24 * 3600 * 1000, 'YYYY-MM-DD')
  planDateRang.value = [formattedDate(time[0], 'YYYY-MM-DD'), formattedDate(time[1], 'YYYY-MM-DD')]
}
const searchFn = () => {
  getDataFn()
}
const resetFn = () => {
  detailFrom.supplierId = ''
  // detailFrom.startDate = formattedDate(NewDate - 30 * 24 * 60 * 60 * 1000, 'YYYY-MM-DD')
  // detailFrom.endDate = formattedDate(NewDate, 'YYYY-MM-DD')
  planDateRang.value = [formattedDate(NewDate - 30 * 24 * 60 * 60 * 1000, 'YYYY-MM-DD'), formattedDate(NewDate, 'YYYY-MM-DD')]
  getDataFn()
}
const CancelFn = () => {
  isVisible.value = false
}
const getDataFn = () => {
  // GetChartDataApi(detailFrom).then(res => {
  //   initChart(res.data)
  // })
  let params = JSON.parse(JSON.stringify(detailFrom))
  params.startDate = planDateRang.value[0]
  params.endDate = planDateRang.value[1]
  GetChartDataApi(params).then(res => {
    initChart(res.data)
  })
  params.pageSize = -1
  GetPurchaseHistoryDetailsApi(params).then(res => {
    TableData.value = res.data.records
  })
}
const show = (row: any) => {
  // clearObjKey(detailFrom)
  detailFrom.supplierId = ''
  detailFrom.skuName = row.skuName
  detailFrom.skuCode = row.skuCode
  // console.log(detailFrom)
  getDataFn()
  GetPurchaseListApi({ "pageSize": -1, }).then(res => {
    SupplierList.value = res.data.records
    PurchaseList.value = res.data.records
  })
  isVisible.value = true
}
defineExpose({
  show
})
</script>
<style lang="scss" scoped>
.deatilpurchase {
  .chartclass {
    border-radius: 4px 4px 4px 4px;
    border: 1px solid rgba(0, 0, 0, 0.15);
  }

  .top {
    padding-top: 24px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.65);
    align-items: center;

    >div:nth-child(2n) {
      line-height: 22px;
      width: 187px;
      font-weight: 500;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
    }

    .colorgreen {
      font-family: DIN, DIN;
      font-weight: 500;
      font-size: 16px;
      color: #0D968B;
      line-height: 24px;
    }

    .smallspan {
      font-weight: 400;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.45);
    }
  }

  .left-tree-box {
    padding-top: 0;
  }

  .table-right {
    // width: 80%;
    flex: 1;
    height: 100%;
    // padding: 16px;
    box-sizing: border-box;
  }

  .lines {
    background: rgba(0, 0, 0, 0.10);
    width: 100%;
    height: 1px;
  }
}
</style>